<template>
    <div class="todos">
        <h1>todolist</h1>

        <swiper ref="mySwiper" :options="swiperOptions" :style="{width:'220px',height:'140px'}">
            <swiper-slide v-for="(item,index) in imgs" :key="index"><img :src="item" style="width:100%;height:100%"></swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

        <input type="text" v-model="content" />
        <button @click="addFn">添加</button>
        {{ content }}

        <ul>
            <li v-for="(item, i) in todos" :key="item.id">
                <input type="checkbox">
                {{ item }}
                <button @click="delFn(i)">删除</button>
            </li>

        </ul>
    </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
    components: {
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    },
    data() {
        return {
            content: "",
            todos: [
                { id: 1, content: '科技于横祸' },
                { id: 2, content: '祸当于横祸' },
                { id: 3, content: '玉洁的手' }
            ],
            swiperOptions: {
                pagination: {
                    el: '.swiper-pagination'
                },
                // Some Swiper option/callback...
            },
            imgs:[
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bugela.com%2Fuploads%2F2021%2F04%2F19%2F9c91167166fbb24fa92e2c1b42994bc6.jpg&refer=http%3A%2F%2Fimg.bugela.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673272373&t=e08b4c1c82b127fcc97d04da5561322e',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc9%2F08%2F4a%2Fc9084a6750e3293e6aeaf981f653b734.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673272373&t=433f0c9de59c9aea12da9c32ca7e904d',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bugela.com%2Fuploads%2F2021%2F04%2F19%2F9c91167166fbb24fa92e2c1b42994bc6.jpg&refer=http%3A%2F%2Fimg.bugela.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673272373&t=e08b4c1c82b127fcc97d04da5561322e',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc9%2F08%2F4a%2Fc9084a6750e3293e6aeaf981f653b734.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673272373&t=433f0c9de59c9aea12da9c32ca7e904d',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.bugela.com%2Fuploads%2F2021%2F04%2F19%2F9c91167166fbb24fa92e2c1b42994bc6.jpg&refer=http%3A%2F%2Fimg.bugela.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673272373&t=e08b4c1c82b127fcc97d04da5561322e',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc9%2F08%2F4a%2Fc9084a6750e3293e6aeaf981f653b734.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673272373&t=433f0c9de59c9aea12da9c32ca7e904d',
                'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0629%2F95f842a0j00qvgwcc001qc000hs00vmc.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673272373&t=682b7fa97cd0850996ccc3098ec29d34',

            ]
        }
    },
    methods: {
        delFn(i) {
            //this 组件实例  data中所有键 methods中所有键
            this.todos.splice(i, 1)
        },
        addFn() {
            //     this.todos.push({
            //         // id:this.todos.length+1,
            //         // content:this.content
            // });

            let { todos, content } = this.$data;
            todos.push({
                id: this.todos.length + 1,
                content,
            })
        }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
}
</script>

<style>

</style>